<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设备监测</title>
    <link rel="stylesheet" href="${rc.contextPath}/statics/forecase/css/init.css">
    <script type="text/javascript" src="${rc.contextPath}/statics/forecase/js/jquery-3.4.1.min.js" ></script>
    <script type="text/javascript" src="${rc.contextPath}/statics/forecase/js/echarts.min.js"></script>
    <style>
        html,body{
            height:100%;
        }
        .content{
            height: 100%;
            background:#fff;
            position:relative;
            box-sizing: border-box;
            padding:20px;
        }
        .content>div{
            position: absolute;
            height: 100%;
            box-sizing: border-box;
            line-height: 32px;
            font-size:14px;
            text-align: center;
        }
        .content .img_view{
            width:65%;
            height:100%;
            top:0px;
            left:0px;
        }
        .content .option_view{
            width:35%;
            top:0px;
            right:0px;
            padding:0px 10px;
        }
        .Dividingline_before:before{
            content: "";
            display: block;
            width:100%;
            height:1px;
            background: radial-gradient(#707070 5%, white 100%);
        }
        .Dividingline_after:after{
            content: "";
            display: block;
            width:100%;
            height:1px;
            background: radial-gradient(#707070 5%, white 100%);
            margin:0px auto;
        }
        .content .img_view img{
            width: 94%;
            height:90%;
            margin:15px auto;
        }
        .content .img_view .img_view_title{
            width:90%;
            margin:0px auto;
        }
        .content .img_view .img_view_content{
            height:calc(100% - 40px);
            overflow: hidden;
        }
        .Characteristics{
            font-size: 12px;
            line-height:28px;
            height:calc(100% - 240px);
        }
        .Characteristics ul{
            display: inline-block;
        }
        .Characteristics ul li{
            display: inline-block;
            padding:0px 5px;
        }
        .Characteristics ul li a{
            color:#000;
        }
        .Characteristics ul li a:hover{
            text-decoration: none;
        }
        .active{
            font-weight:800;
            box-sizing: border-box;
            border-bottom: 2px solid red;
        }
        .options{
            height:calc(100% - 30px);
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="img_view">
            <div class="Dividingline_after img_view_title">--设备展示区--</div>
            <div class="img_view_content"><img src="${rc.contextPath}/statics/img/device.png" alt="设备图"></div>
        </div>
        <div class="option_view">
            <div class="Dividingline_after">
                <b>设备选择:</b>
                <select name="pick_device" id="pick_device">
                    <option value="0" style="display: none;"  selected disabled>==请选择设备==</option>
                    <option value="1">已选设备编号A001</option>
                </select>
            </div>
            <div class="Dividingline_after Dividingline_before">--部件加载区--</div>
            <div style="margin-top:10px;line-height:1;">
                <img src="${rc.contextPath}/statics/img/device_parts.png" alt="设备部件图" style="display:none" id="device_part"></div>
                <div class="Dividingline_after">--状态监测区--</div>
                <div class="Characteristics" style="display:none">
                    <ul>
                        <li  class="active"><a href="javascript:void(0)">通道&nbsp;1</a></li>
                        <li><a href="javascript:void(0)">通道&nbsp;2</a></li>
                        <li><a href="javascript:void(0)">通道&nbsp;3</a></li>
                        <li><a href="javascript:void(0)">通道&nbsp;4</a></li>
                    </ul>
                    <span>
                        &nbsp;&nbsp;特征量选择：
                        <select name="pick_Characteristics" id="pick_Characteristics">
                            <option value="" style="display: none;"  selected disabled>请选择特征值</option>
                            <option value="1">峰值</option>
                            <option value="2">裕度值</option>
                            <option value="3">脉冲值</option>
                            <option value="4">波形值</option>
                            <option value="5">峭度值</option>
                            <option value="6">偏度值</option>
                        </select>
                    </span>
                    <div class="options" id="charts" style="display: none">
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    var passageway=1;
    var page=0;
    $(document).ready(function(){
        $(".options div").first().css("display","block");
        $(".Characteristics ul li").click(function(){
            $(".Characteristics ul li").removeClass("active");
            $(this).addClass("active");
            passageway=$(this).index()+1;
            $("#charts").css("display","none");
            window.clearInterval(t);
            datas={};
            clumn=["NaN","NaN","NaN","NaN","NaN","NaN","NaN","NaN"];
            $("#pick_Characteristics").val("");
            t="";
            /*            var index=$(this).index();
                        $(".options div").css("display","none");
                        $(".options div").eq(index).css("display","block");*/
        });
    });
</script>
<script>
    function randomData() {
        now = new Date(+now + oneDay);
        value = value + Math.random() * 21 - 10;
        return {
            name: now.toString(),
            value: [
                [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
                Math.round(value)
            ]
        };
    }
/*
    var data = [];
    var now = +new Date(2020, 1, 1);
    var oneDay = 24 * 3600 * 1000;
    var value = Math.random() * 1000;
    for (var i = 0; i < 20; i++) {
        data.push(randomData());
    }
    */
var datas={};
var data=[0,0,0,0,0,0,0,0];
var clumn=["NaN","NaN","NaN","NaN","NaN","NaN","NaN","NaN"]
    function getOption(data,clumn){
        var option = {
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    params = params[0];
                   var date = new Date(params.name);
                   return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
                },
                axisPointer: {
                    animation: false
                }
            },
            grid: {
                top:"3%",
                left: '1%',
                right: '1%',
                bottom: '1%',
                containLabel: true
            },
            visualMap:{
                show: false,
                pieces: [{
                    gt: 0,
                    lte: 600,
                    color: '#54ff5e'
                }, {
                    gt: 600,
                    lte: 700,
                    color: '#ffe80e'
                },{

                    gt: 700,
                    color: '#ff3046'
                }],
                outOfRange: {
                    color: '#999'
                }
            },
            dataZoom: [{
                type: 'inside'
            }],
            xAxis: {
                type: 'category',
                splitLine: {
                    show: false
                },
                axisTick:{
                    inside:true
                },
                boundaryGap: false,
                axisLabel:{
                    inside:false,
                    rotate:25,
                    formatter: function (value, index) {
                        return value
                    }
                },
                data:clumn
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                },
                axisTick:{
                    inside:true
                },
                axisLabel:{
                    inside:false
                }
            },
            series: [{
                name: '模拟数据',
                type: 'line',
                showSymbol: false,
                hoverAnimation: false,
                data: data
            }]
        };
        return option;
    }

    var t;
    function setTime(){
        t=setInterval(function () {
            $.post("${rc.contextPath}/forecase/list",{type:$("#pick_Characteristics").val(),passageway:passageway,page:page},function(d){
                if(!datas["a_0"]){
                    datas["a_0"]=[0,0,0,0,0,0,0,0];
                }
                datas["a_0"].push(d["a_0"]);
                if( datas["a_0"].length > 8){
                    datas["a_0"].shift();
                }
                if(!datas["a_1"]){
                    datas["a_1"]=[0,0,0,0,0,0,0,0];
                }
                datas["a_1"].push(d["a_1"]);
                if( datas["a_1"].length > 8){
                    datas["a_1"].shift();
                }
                if(!datas["a_2"]){
                    datas["a_2"]=[0,0,0,0,0,0,0,0];
                }
                datas["a_2"].push(d["a_2"]);
                if( datas["a_2"].length > 8){
                    datas["a_2"].shift();
                }
                if(!datas["a_3"]){
                    datas["a_3"]=[0,0,0,0,0,0,0,0];
                }
                datas["a_3"].push(d["a_3"]);
                if( datas["a_3"].length > 8){
                    datas["a_3"].shift();
                }
                if(!datas["a_4"]){
                    datas["a_4"]=[0,0,0,0,0,0,0,0];
                }
                datas["a_4"].push(d["a_4"]);
                if( datas["a_4"].length > 8){
                    datas["a_4"].shift();
                }
                if(!datas["a_5"]){
                    datas["a_5"]=[0,0,0,0,0,0,0,0];
                }
                datas["a_5"].push(d["a_5"]);
                if( datas["a_5"].length > 8){
                    datas["a_5"].shift();
                }
                clumn.push(d.name.substr(-8,8));
                clumn.shift();
                data=datas["a_"+($("#pick_Characteristics").val()-1)];
                myChart.setOption(getOption(data,clumn));
                page++;
            },"json");
        }, 10000);
    }


    $("#pick_device").change(function(){
        if($("#pick_device").val() == 1){
            $("#device_part").css("display","inline-block");
            $(".Characteristics").css("display","block");
        }
    });
    var myChart;
    $("#pick_Characteristics").change(function(){
        if($("#pick_Characteristics").val() == ""){
            return;
        }
        if(!t || t == ""){
        $("#charts").css("display","block");
        myChart = echarts.init(document.getElementById('charts'));
            $.post("${rc.contextPath}/forecase/list",{type:$("#pick_Characteristics").val(),passageway:passageway,page:page},function(d){
                if(!datas["a_0"]){
                    datas["a_0"]=[0,0,0,0,0,0,0,0];
                }
                datas["a_0"].push(d["a_0"]);
                if( datas["a_0"].length > 8){
                    datas["a_0"].shift();
                }
                if(!datas["a_1"]){
                    datas["a_1"]=[0,0,0,0,0,0,0,0];
                }
                datas["a_1"].push(d["a_1"]);
                if( datas["a_1"].length > 8){
                    datas["a_1"].shift();
                }
                if(!datas["a_2"]){
                    datas["a_2"]=[0,0,0,0,0,0,0,0];
                }
                datas["a_2"].push(d["a_2"]);
                if( datas["a_2"].length > 8){
                    datas["a_2"].shift();
                }
                if(!datas["a_3"]){
                    datas["a_3"]=[0,0,0,0,0,0,0,0];
                }
                datas["a_3"].push(d["a_3"]);
                if( datas["a_3"].length > 8){
                    datas["a_3"].shift();
                }
                if(!datas["a_4"]){
                    datas["a_4"]=[0,0,0,0,0,0,0,0];
                }
                datas["a_4"].push(d["a_4"]);
                if( datas["a_4"].length > 8){
                    datas["a_4"].shift();
                }
                if(!datas["a_5"]){
                    datas["a_5"]=[0,0,0,0,0,0,0,0];
                }
                datas["a_5"].push(d["a_5"]);
                if( datas["a_5"].length > 8){
                    datas["a_5"].shift();
                }
                clumn.push(d.name.substr(-8,8));
                clumn.shift();
                data=datas["a_"+($("#pick_Characteristics").val()-1)];
                myChart.setOption(getOption(data,clumn));
                page++;
                setTime();

            },"json");
        }else{
            data=datas["a_"+($("#pick_Characteristics").val()-1)];
            myChart.setOption(getOption(data,clumn));
        }
    });
</script>
</html>